<!DOCTYPE html>
<html base="/" lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登陆</title>
    <link rel="stylesheet" href="/static/login/css/login.css?k=2">
</head>
<body>
    <div id="canvas-cont"></div>
    <div class="content-div">

        <!---圆角框-->
        <p class="line"></p>

        <!--欢迎词-->
        <!-- <p class="welcome">登陆</p> -->

        <div class="flex borderBox item">
            <img src="/static/login/img/user.png" alt="">
            <input  type="text" name="name" value="" placeholder="用户名"  class="user">
        </div>
        <div class="flex borderBox item">
            <img src="/static/login/img/pass.png" alt="" >
            <input  type="password" name="password" value="" placeholder="密码" class="pass">
        </div>
<!--        <div class='borderBox item' id="vaptchaContainer">-->
<!--            <div class="vaptcha-init-main">-->
<!--                <div class="vaptcha-init-loading">-->
<!--                    <a href="https://www.vaptcha.com" target="_blank">-->
<!--                        <img src="https://cdn.vaptcha.com/vaptcha-loading.gif" />-->
<!--                    </a>-->
<!--                    <span class="vaptcha-text">Vaptcha启动中...</span>-->
<!--                </div>-->
<!--            </div>-->
<!--        -->
<!--        </div>-->
        <!--  <div class="flex borderBox item">
            <img src="/static/login/img/pass.png" alt="" >
            <input autocomplete="off" type="captcha" value="" name="captcha" placeholder="验证码" class="captcha">
        </div>
        <div>
            <img id="captchaImg" src="{:captcha_src()}" onclick="this.src='/captcha?id='+Math.random()" alt="验证码" title="点击刷新" style="cursor: pointer">
            <p>点击图片刷新</p>
        </div> -->

        <p class="btn">登陆</p>

        <!--提示-->
        <p class="borderBox tip"></p>
	</div>
<script src='/static/login/js/jquery-3.2.1.min.js'></script>
<script src="//cdn.vaptcha.com/v2.js"></script>
<script src="/static/login/js/canvas-particle.js"></script>
<script>
// var token; //验证码生成的token
// function vaptchaInit () {
//     vaptcha({
//         //配置参数
//
//         vid: "{$data['vid']}", // 验证单元id
//
//         type: "{$data['type']}", // 展现类型 嵌入式：'embed' 点击式:'click'
//
//         container: '#vaptchaContainer' // 按钮容器，可为Element 或者 selector
//
//     }).then(function (vaptchaObj) {
//         vaptchaObj.listen('pass', function(){
//             token = vaptchaObj.getToken();
//             if($('.user').val().trim() && $('.pass').val().trim()){
//                 $('p.btn').click();
//             };
//         });
//         vaptchaObj.render();// 调用验证实例 vaptchaObj 的 render 方法加载验证按钮
//         /* let timer = setInterval(()=>{
//             let $ele =  $('#vaptchaContainer .vp-basic-cont .vp-about');
//             if($ele.get(0)){
//                 $ele.remove();
//                 clearInterval(timer);
//                 timer = null;
//             };
//         },100); */
//     });
// }
//
// vaptchaInit();

//点击登陆
$('p.btn').click(function(e){
    e.stopPropagation();
    var user = $('.user').val().trim();
    var pass = $('.pass').val().trim();

    if(!user || !pass){
        showToast('请输入用户名或密码');
        return;
    };
    //console.log(user, pass)
    if(/<([\s\S])+>/gi.test(user)){
        showToast('输入用户名不合法');
        return;
    };
    if(/<([\s\S])+>/gi.test(pass)){
        showToast('输入用户名不合法');
        return;
    };
    if(/<([\s\S])+>/gi.test(pass)){
        showToast('输入用户名不合法');
        return;
    };

    // if(!token){
    //     showToast('验证码未通过');
    //     return;
    // };

    var data = {
        name: user,
        password: pass,
        // token: token
    };
    $.post('/admin/login/dologin',data).then(function(res) {
        if(res.code==0) {
            window.location.href = res.data;
        }else{
            showToast(res.message);
            vaptchaInit();
        }
    })
});



let timer;
function showToast(txt){
    let $tipEle = $('.tip');
    $tipEle.text(txt).css({display: 'block'});
    if(timer){
        clearTimeout(timer);
        timer = null;
    };
    timer = setTimeout(function(){
        $tipEle.css({display: 'none'});
    },2000);
}

CanvasParticle();
</script>
</body>
</html>